import classNames from 'classnames'
import styles from './knowledge.less'
import '../static/font_n0018mswcz/iconfont.css'
import { useSelector, useDispatch,Link } from 'umi'
import { useEffect } from 'react'
import {IknowledgeListItem} from '../utils/interface'
import moment from 'moment';
import Istate from '../models/type'

const Knowledge: React.FC = () => {
  moment.locale('zh-cn')
  let { knowledgeList } = useSelector((state:Istate) => state.knowledge)
  console.log(knowledgeList)
  let dispatch = useDispatch()
  useEffect(() => {
    dispatch({
      type:'knowledge/getKnowledgeList',
      payload:{
        page:1,
        pageSize:12,                         
        status:"publish"
      }
    })
  },[])
  return <div className={styles.knowledge}>
    <div className={styles.content}>
      {
        knowledgeList.map((item:IknowledgeListItem) => {
          return <Link to={`/knowledge/${item.id}`} className={styles.conItem} key={item.id}>
            <h3>{item.title}  <span>|  {moment(item.createAt, "YYYY-MM-DDTHH:mm:ss.sssZ").fromNow()}</span></h3>
            <div className={styles.itemCon}>
              <div className={styles.conLeft}>
                <img src={item.cover} alt="" />
              </div>
              <div className={styles.conRight}>
                <p>{item.summary}</p>
                <div>
                  <span><span className="iconfont icon-chakan">  {item.views}</span>  ·  <span className="iconfont icon-fenxiang">  分享</span></span>
                </div>
              </div>
            </div>
          </Link>
        })
      }
    </div>
  </div>
}

export default Knowledge